// 10之内的数
<template>
	<view class="content">
		<custom-navigation :title="title" leftTxt="显示参考"  @leftAction="showTishi=!showTishi" rightTxt="重新开始"  @rightAction="init()"></custom-navigation>
		<view class="red" @click="goto">
			网络学习
		</view>
		<!-- <view class="text-area">
			<text class="title">10之内的加法</text>
		</view> -->
		<view class="error-count" v-if="errorCount"> 
			错题数:<text>{{errorCount}}</text>
		</view> 
		<h5 v-if="answer.length">剩余问题个数:{{answer.length}}</h5>
		<h5 v-else>问题已全部答完!</h5>
		<table v-if="item!==''">
			<tr>
				<td colspan="3">请按照图片发音:</td>
				<!-- <td colspan="3" style="width: 150px;color:red;font-size:50px;">{{item.type}}</td> -->
				<td colspan="1">
					<button type="primary" @click="play()">发音</button>
				</td>
			</tr>
			<tr>
				<td class="flex line100" colspan="2">
				<view class="flex2"></view>
					<button class="flex1" type="primary" @click="next_item(0);">错误</button>
					<view class="flex1"></view>
					<button class="flex1" type="primary" @click="next_item(1);">正确</button>
				</td>
			</tr>
			<tr>
				<td td colspan="4" >
					提示:<text class="red">{{item.type}}</text>
				</td>
			</tr>
			<tr>
				<td td colspan="4" >
					<image @click="play()" :src="'/static/pinyin/'+item.key+'.png'" mode="aspectFit"></image>
				</td>
			</tr>
			<tr v-if="showTishi">
				<td td colspan="4">
					<image src="/static/pinyin.jpg" mode="widthFix"></image>
				</td>
			</tr>
		</table>
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation/custom-navigation.vue";
	export default {
		components: {
			customNavigation
		},
		data() {
			return {
				title: '学习拼音',
				data1:[],
				data1_del:[],
				item:null,
				answer:[],
				errorCount:0,
				showTishi:false,
				mp3:'http://www.wetools.com/assets/mp3/zimu/',
				
			}
		},
		onLoad() {
			// 操作数据
			this.init();
			console.error('this.data1:',JSON.stringify(this.data1))
		},
		onReady() {
			// setTimeout(()=> {this.init();}, 3000);
			this.init()
		},
		methods: {
			play(){
				// if(this.item.type == '整体认读音节'){
				// 	// tempArr = 'zhi chi shi ri zi ci si yi wu yu ye yue yuan yin yun ying'.split(' ')
				// 	// let obj = {
				// 	// 	zhi:'只',
				// 	// 	chi:'吃',
				// 	// 	shi:'狮',
				// 	// 	ri:'日',
				// 	// 	zi:'趑',
				// 	// 	ci:'疵',
				// 	// 	si:'思',
				// 	// 	yi:'衣',
				// 	// 	wu:'屋',
				// 	// 	yu:'淤',
				// 	// 	ye:'耶',
				// 	// 	yue:'约',
				// 	// 	yuan:'冤',
				// 	// 	yin:'因',
				// 	// 	yun:'晕',
				// 	// 	ying:'英',
				// 	// }
				// 	// new Audio("http://tts.youdao.com/fanyivoice?word="+obj[this.item.key]+"&le=zh&keyfrom=speaker-target").play();
				// } else {
					
				// }
				let audio = document.createElement("audio");
				// http://www.wetools.com/assets/mp3/zimu/chi.mp3
				if(this.item.type == '整体认读音节'){
					audio.setAttribute("src", this.mp3+this.item.key+"1.mp3");
				} else {
					audio.setAttribute("src", this.mp3+this.item.key+".mp3");
				}
				audio.play();
			},
			goto(){
				uni.navigateTo({url: '/pages/index/pinyinMore'})
			},
			getPinYin(){
				let tempArr = [];
				let pingYinArr = []
				// 汉语拼音字母表
				// 一、声母（23个）
				//  b p m f d t n l g k h j q x zh ch sh r z c s y w 
				tempArr = 'b p m f d t n l g k h j q x zh ch sh r z c s y w'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'声母'})
				}
				// 二、单韵母（6个）
				// a o e i u v
				tempArr = 'a o e i u v'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'单韵母'})
				}
				// 三、复韵母（9个）
				//  ai ei ui ao ou iu ie ve er 
				tempArr = 'ai ei ui ao ou iu ie ve er'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'复韵母'})
				}
				// 四、前鼻韵母（5个）
				//  an en in un vn
				tempArr = 'an en in un vn'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'前鼻韵母'})
				}
				// 五、后鼻韵母（4个）
				//  ang eng ing ong 
				tempArr = 'ang eng ing ong'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'后鼻韵母'})
				}
				// 六、整体认读音节（16个）
				//  zhi chi shi ri zi ci si yi wu 
				//  yu ye yue yuan yin yun ying 
				tempArr = 'zhi chi shi ri zi ci si yi wu yu ye yue yuan yin yun ying'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'整体认读音节'})
				}
				return pingYinArr;
			},
			init(){
				this.errorCount = 0;
				try {
					const pages = getCurrentPages()
					const page = pages[pages.length - 1]
					this.title = page.$holder.navigationBar.titleText;
				} catch (error) {
					
				}
				this.item=null;
				let answer = this.getPinYin();
				const randomArr = (arr) => {
				  for (let i = 0; i < arr.length; i++) {
				    const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i;
				    [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
				  }
				  return arr
				};
				this.answer = randomArr(answer);
				this.data1 = [];
				for (var i = answer.length-1; i >= 0; i--) {
					this.data1.unshift({key:i,status:'',res:''});
				}
				this.next_item();
				this.$forceUpdate();
			},
			request(val,index){
				if(!this.item.status){
					this.set_status(this.item.key,val,index);
				}
			},
			//设置答案
			set_status(key,val,index){
				// console.error({key,val})
				for (var i = 0; i < this.data1.length; i++) {
					const item = this.data1[i];
					if(key == item.key){
						if(eval(key) == val){
							item.res = val;
							item.status = '正确';
							this.data1_del.push(item);
							this.answer.splice(index,1);
							// this.data1.splice(i,1);
							// i--;
							// continue;
							// setTimeout(()=> {this.next_item()}, 1000);
						} else {
							item.res = val;
							item.status = '错误';
							this.errorCount++;
							// setTimeout(()=> {this.next_item()}, 1000);
						}
					}
				}
			},
			// 获取剩下的随即值
			get_item(){
				let i = parseInt(Math.random()*100000);
				i = i%this.data1.length;
				if(this.data1[i]){
					this.data1[i].res='';
					this.data1[i].status='';
					this.item = this.data1[i];
				}
			},
			// 获取剩下的随即值
			next_item(type){
				// if(this.item){
				// 	if(this.item.status == '正确'){
				// 		for (var i = 0; i < this.data1.length; i++) {
				// 			if(this.data1[i].key == this.item.key) {
				// 				if(this.data1[i+1]){
				// 					this.item = this.data1[i+1];
				// 					break;	
				// 				}
				// 			}
				// 		}
				// 	} else {
				// 		this.item.status ='';
				// 		this.item.res ='';
				// 	}
				// } else {
					if(this.answer.length){
						if(!type){
							this.answer.push(this.item)
						 }
						this.item = this.answer[0];
						this.answer.splice(0,1);
					}
				// }
				
				// this.set_status(this.answer[0],this.answer[0],0)();
			}
		}
	}
</script>

<style>
	.line100{
		width: 100%;
	}
	.tcenter{
		text-align: center;
		width: 100%;
		/* border-bottom: 1px solid #8f8f94; */
	}
	.content{
		font-size: 30px;
	}
	.list{
		/* border: 1px solid #8f8f94; */
		width: auto;
		height: 70vh;
		/* display: flex; */
		flex-direction: column;
		flex: 1;
		overflow:scroll;
	}
	.inline1{
		display: inline;
	}
	.inline2{
		display: inline-block;
		width: 48%;
		margin: 3px;
		background-color: bisque;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
